<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<meta charset="UTF-8">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
					<script type="text/javascript">
					jQuery(document).ready(function($) {
						$(".scroll").click(function(event){		
							event.preventDefault();
							$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
						});
					});
					</script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
		<script type="text/javascript" id="sourcecode">
			$(function()
			{
				$('.scroll-pane').jScrollPane();
			});
		</script>
</head>
<body>
	<!--- Header Starts Here --->
	<div class="header">
		<div class="container">
			<div class="logo">
				 <a href="index.html"><img src="images/logo.png" alt=""></a>
			</div>
			<div class="menu">
				<ul class="menu-top">
					<li><a class="play-icon popup-with-zoom-anim" href="#small-dialog">Log In</a></li>
					<li><a class="play-icon popup-with-zoom-anim" href="#small-dialog1">Sign up</a></li>
				</ul>	
				<!---pop-up-box---->
					  <script type="text/javascript" src="js/modernizr.custom.min.js"></script>    
					<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
					<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
					<!---//pop-up-box---->
				<div id="small-dialog" class="mfp-hide">
						<div class="login">
							<h3>Log In</h3>
							<h4>Already a Member</h4>
							<input type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" />
							<input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"/>
							<input type="submit" value="Login" />
						</div>
					</div>
					<div id="small-dialog1" class="mfp-hide">
						<div class="signup">
							<h3>Sign Up</h3>
							<h4>Enter Your Details Here</h4>
							<input type="text" value="First Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'First Name';}" />
							<input type="text" value="Second Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Second Name';}" />
							<input type="text" class="email"value="Enter Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter Email';}"  />
							<input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"/>
							<input type="submit"  value="SignUp"/>
						</div>
					</div>	
				 <script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
																						
						});
				</script>															
			<a href="#" class="right_bt" id="activator"><img src="images/nav.png" alt=""/></a>
				<div class="box" id="box">
				   <div class="box_content_center">
					   <div class="menu_box_list">
						   <ul>
							   <li><a href="#home" class="scroll">Home</a></li>
							   <li class="active"><a href="#about" class="scroll">About</a></li> 
							</ul>
						</div>
						<a class="boxclose" id="boxclose"><img src="images/close.png" alt=""/></a>
					  </div>                
					</div><div class="tlinks">Collect from <a href="http://www.cssmoban.com/"  title="网站模板">网站模板</a></div>
					<script type="text/javascript" src="js/easing.js"></script>
					     <script type="text/javascript">
								var $ = jQuery.noConflict();
									$(function() {
										$('#activator').click(function(){
												$('#box').animate({'top':'0px'},500);
										});
										$('#boxclose').click(function(){
												$('#box').animate({'top':'-700px'},500);
										});
									});
									$(document).ready(function(){
									
									//Hide (Collapse) the toggle containers on load
									$(".toggle_container").hide(); 
									
									//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
									$(".trigger").click(function(){
										$(this).toggleClass("active").next().slideToggle("slow");
										return false; //Prevent the browser jump to the link anchor
									});
									
									});
								</script>
								
				</div> 
				<div class="clearfix"></div>
				<div class="header-bottom">
					<p>Find your favorite</p>
					<h1>Coffee</h1>
					<a href="#">Get Started</a>
				</div>
		</div>
	</div>
	<!--- Header Ends Here --->
	<!-- Aboutus Starts Here --->
	<div class="aboutus" id="about">
		<div class="container">
			<div class="row aboutus-row">
				<div class="col-md-4 aboutus-row-column">
					<i class="icon1"></i>
					<h3>GET INSPIRED</h3>
					<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p>
				</div>
				<div class="col-md-4 aboutus-row-column">
					<i class="icon2"></i>
					<h3>GET LOCATION</h3>
					<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p>
				</div>
				<div class="col-md-4 aboutus-row-column">
					<i class="icon3"></i>
					<h3>GET SOCIAL</h3>
					<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx  </p>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!-- Aboutus Ends Here --->
	<!-- Interduce Starts Here  ---->
	<div class="interduce">
		<div class="container">
			<div class="row interduce-row">
				<div class="col-md-6 inter-row-column">
					<h4><span>INTRODUCING</span> THE COFFEAT APP</h4>
					<p>莫比·埃格特·波苏尔·多尔。球团草丛Aliquet Aliquet。埃涅内特猫坐在阿美的直径莫利斯乌兰科珀。一件白色的背心。斯特林迪西·特里斯蒂克·拉库斯·马蒂斯·波塔（Suspendise Tristique Lacus AC Mattis Porta）。
						Ligula码头的Vivamus，Vehicula non Lacinia-sed，Faucibus Sit Amet Libero。在Libero Dui，Eleifend Eu Nisi ID，Egsta Fringilla Odio。在瓦利乌斯码头，一个叫马萨·亨德瑞特·乌兰科尔帕的欧洲码头。Suspendise Porta Mattis Convallis.埃尼安·坦帕斯·利古拉·奥迪奥·朗卡斯，奎斯·阿利奎姆·多尔·阿库姆桑。
						悬浮的阿利奎特猫神圣的自由刚果，塞德普尔文纳直径马来苏达。杜伊斯·维希利娅·尼伯德·亨德瑞特。不要坐在一个马蒂斯马萨。 </p>
						
					</ul>
				</div>
				<div class="col-md-6 inter-row-column2">
					<img src="images/iphone.png" alt=""/>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!-- Interduce Ends Here  ---->
	<!--- Slider Starts Here --->
	<div class="slider">
		<div class="container">
			<div class="slider-content">
				<script src="js/responsiveslides.min.js"></script>
			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 4
			      $("#slider4").responsiveSlides({
			        auto: true,
			        pager: true,
			        nav: true,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });
			
			    });
			  </script>
			<!----//End-slider-script---->
			<!-- Slideshow 4 -->
			    <div  id="top" class="callbacks_container">
			      <ul class="rslides" id="slider4">
			        <li>
			          <div class="slider-top">
			          	<img src="images/1.jpg" alt=""/>
			          	<p>"Si vous voulez mon avis concernant l'extremite observee, il est necessaire d'etudier la globalite des solutions de bon sens, parce que la nature a horreur du vide."</p>
			          	<p class="below">-Salade de Banoui, Paris</p>
			          </div>
			        </li>
			        <li>
			          <div class="slider-top">
			          <img src="images/2.jpg" alt=""/>
			          	<p class="second-slide">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."</p>
			          	<p class="below">-Salade de Banoui, Paris</p>
			          </div>
			        </li>
			        <li>
			          <div class="slider-top">
			          	<img src="images/3.jpg" alt=""/>
			          	<p>"Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto."</p>
			          	<p class="below">-Salade de Banoui, Paris</p>
			          </div>
			        </li>
			      </ul>
			    </div>
			    <div class="clearfix"> </div>
	  			<!--- banner Slider Ends Here ---> 
		</div>
	</div>
			</div>
		</div>
	</div>

	<!--- Map Ends Here ---->
	<!-- Footer Starts Here ---->
	<div class="footer">
		<div class="container">
			<div class="logo">
				 <a href="index.html"><img src="images/f_logo.png" class="foot-img" alt=""></a>
			</div>
			
			<div class="clearfix"></div>
		</div>
		<script type="text/javascript">
						$(document).ready(function() {
							
							$().UItoTop({ easingType: 'easeOutQuart' });
							
						});
					</script>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	</div>


</body>
</html>